<template>
  <view class="tkd-container">
    <view class="item-province-name">
      {{provinceName}}
      <view class="city-tz">{{ provinceAgentName }}</view>
      <!-- <view class="city-tz">{{ userName }}<text class="tangzhu">省堂主</text></view> -->
    </view>
    <view v-for="(item, i) in content" :key="i" class="tkd-items">
      <view class="tkd-item">
        <view class="item-head">
          <view class="city-name">
            <view class="city-horn horn1"></view>
            <view class="city-horn horn2"></view>
            {{ item.cityName }}
          </view>
          <view v-if="item.userName" class="city-tz">
            {{ item.userName }}
            <text class="tangzhu">市堂主</text>
          </view>
        </view>
        <view class="item-childs">
          <view v-for="(citem, ci) in item.districtList" :key="ci" class="item-child">{{citem.districtName}} {{citem.userName}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: [],
        provinceAgentName: '',
        provinceName: '',
        userName: '',
      }
    },
    onLoad(query = {}) {
      const {
        provinceId,
        surnameId,
        provinceName,
        userName
      } = query
      this.provinceId = provinceId
      this.surnameId = surnameId
      this.provinceName = provinceName
      this.userName = userName
      this.getData()
    },
    methods: {
      getData() {
        const {
          provinceId,
          surnameId
        } = this
        this.$http({
          url: '/agent/getCityAgentList',
          data: {
            provinceId,
            surnameId
          }
        }).then(res => {
          this.provinceAgentName = res.data.provinceAgentName
          this.content = res.data.cityList
        })
      },
    }
  }
</script>

<style lang="less">
  .tkd-container {
    background-color: #FDF8F0;
    min-height: 100vh;
    padding: 30rpx;
    color: #644030;
    .item-province-name{
      font-size: 32rpx;
      color: #101010;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .tkd-items{
      padding-top: 20rpx;
      .tkd-item{
        margin-bottom: 30rpx;
      }
      .item-head{
        display: flex;
        align-items: center;
      }
      .city-name{
        display: inline-block;
        background: url(../../static/assets/tk/area-bg-texture.png) repeat-x;
        background-size: 100% 100%;
        padding: 0 50rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 28rpx;
        text-align: center;
        color: #fff;
        position: relative;
        margin: 0 34rpx;
        .city-horn{
          position: absolute;
          background: url(../../static/assets/tk/area-bg-horn.png) no-repeat;
          background-size: 100% 100%;
          top: 0;
          width: 42rpx;
          height: 64rpx;
          &.horn1{
            left: -40rpx;
          }
          &.horn2{
            right: -40rpx;
            transform: rotate(180deg);
          }
        }
      }
      .item-childs{
        display: flex;
        flex-wrap: wrap;
        padding-top: 20rpx;
        .item-child{
          margin-right: 60rpx;
          margin-bottom: 10rpx;
          font-size: 28rpx;
        }
      }
    }
    .city-tz{
      margin-left: 40rpx;
      // font-size: 28rpx;
      .tangzhu{
        font-size: 24rpx;
        margin-left: 20rpx;
      }
    }
  }
</style>
